<template>
	<view class="index">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#FFF'}"></view>
		<uni-nav-bar backgroundColor="#FFF;" color="#333" title="IHG Event" :border="false" />
		<view class="headerChangeLanguage">
			<view class="logo">
				<view>
					<text class="name">Hi,{{$t('language.name') == '中文' ? englishname : userName}}</text>
					{{$t('language.meeting7')}}
					<text class="sign-up-num">{{sign_up_num}}</text>
					{{$t('language.meeting8')}}
				</view>
			</view>
			<view class="language" @click="changeLanguage">
				<view :class="$t('language.name') == '中文'?'langeageZh':'langeageEn'"></view>
			</view>
		</view>
		<view class="meetListBox">
			<view class="meetListGroup" v-for="(item,index) in meetList" :key="index" @click="toSignUp(item)">
				<image class="imgcover" fit="cover" :src="item.cover" />
				<view class="ListMessage">
					<view v-if="$t('language.name') == '中文'" class="title">{{item.title}}</view>
					<view v-else class="title">{{item.e_title}}</view>
					<view class="addNum">
						<text class="addNum-num">{{item.sign_up_num}} </text>
						<text class="addNum-text">{{$t('language.meeting1')}}</text>
						<view class="progress" v-if="item.limit_num > 0">
							<van-progress :percentage="(item.sign_up_num/item.limit_num)*100"
								:show-pivot="false" color="#e8542c" />
						</view>
					</view>
					<view class="time">
						<image :src="blocktime" mode=""></image>
						{{item.start}} ~ {{item.end}}
					</view>
			
					<view class="lastMessage">
						<view class="address">
							<image :src="blockaddress" mode=""></image>
							{{$t('language.name') == '中文'?item.city:item.e_city}}
						</view>
			
						<view class="lastBtn blockBg" v-if="wachTime(item.deadline)">
							{{$t('language.meeting24')}}</view>
						<view class="lastBtn" v-else-if="item.type == 1">{{$t('language.meeting4')}}</view>
						<view class="lastBtn blockBg" v-else-if="item.type == 2">{{$t('language.meeting5')}}
						</view>
						<view class="lastBtn blockBg" v-else-if="item.type == 3">{{$t('language.meeting6')}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		user_info,
		event_list
	} from "@/api/user";
	export default {
		name: "meetList",
		components: {
			uniNavBar
		},
		data() {
			return {
				loading: false,
				statusBarHeight: 44,
				finished: false,
				meetList: [],
				pageIndex: 0,
				sign_up_num: '',
				userName: "",
				englishname: "", 
				blocktime: HTTP_REQUEST_URL + '/static/img/blocktime.png',
				blockaddress: HTTP_REQUEST_URL + '/static/img/blockaddress.png-1.png',
			};
		},
		beforeCreate() {},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			var userName = uni.getStorageSync("userName");
			var englishname = uni.getStorageSync("englishname");
			this.userName = userName;
			this.englishname = englishname;
			this.getMeetingList()
		},
		computed: {
			locale() {
				return this.$i18n.locale
			}
		},
		methods: {
			wachTime(time) {
				const dateTime = new Date().getTime()
				if (dateTime > time * 1000) return true
				return false
			},
			async getMeetingList() {
				//  异步更新数据
				this.pageIndex ++;

				const response = await event_list({
					lang: this.locale,
					page: this.pageIndex
				})

				if (response.code == 200) {
					let pushList = response.data;
					this.sign_up_num = response.sign_up_num
					for (let i = 0; i < pushList.length; i++) {
						this.meetList.push(pushList[i]);
					}
					// 加载状态结束
					this.loading = false;
					// 数据全部加载完成
					if (pushList.length == 0) {
						this.finished = true;
					}
				} else {
					// Toast(response.data.msg);
				}
			},
			toSignUp(istype) {
				console.log(istype, 'istype')
				// indexBox/index
				uni.navigateTo({
					url: "/pageIndex?istype=" + istype.type + '&evenId=' + istype.event_id
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			},
		},
		onReachBottom() {
			if(this.finished) return
			this.getMeetingList()
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	page {
		background: #f6f5ef;
	}

	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4upx 4upx #eee;
		box-sizing: border-box;
	}

	.logo {
		color: #9b9d9c;
		letter-spacing: 2upx;
	}

	.logo text {
		color: #1f4456;
		margin: 0 4upx;
		font-size: 32upx;
		&.name {
			margin-right: 10upx;
		}
	}

	.logo text.sign-up-num {
		color: #e8542c;
	}

	.language {
		flex-shrink: 0;
	}

	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.meetListBox {
		padding: 30upx 30upx;
	}

	.meetListGroup {
		background: #fff;
		position: relative;
		margin-bottom: 30upx;
		border-radius: 8upx;
	}

	.meetListGroup .imgcover {
		width: 100%;
		height: 364upx;
		display: block;
		border-radius: 8upx 8upx 0 0;
		overflow: hidden;
	}

	.ListMessage {
		padding: 30upx;
	}

	.ListMessage .title {
		color: #444;
		font-size: 32upx;
		padding-bottom: 16upx;
	}

	.ListMessage .time {
		color: #707372;
		font-size: 24upx;
		display: flex;
		padding: 2upx 0;
		justify-content: flex-start;
		align-items: center;
	}

	.ListMessage .time image {
		width: 22upx;
		height: 22upx;
		margin-right: 10upx;
	}

	.lastMessage {
		display: flex;
		justify-content: space-between;
	}

	.address {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 24upx;
		color: #666666;
	}

	.address image {
		width: 22upx;
		height: 26upx;
		margin-right: 8upx;
	}

	.lastBtn {
		white-space: nowrap;
		padding: 8upx 48upx;
		height: 50upx;
		background: #1f4456;
		color: #fff;
		border-radius: 65upx;
		text-align: center;
		line-height: 50upx;
	}

	.blockBg {
		background: #e2e0df;
		color: #666666;
	}

	.addNum {
		font-size: 24upx;
		display: flex;
		align-items: center;
	}

	.addNum .addNum-num {
		color: #d96932;
	}

	.addNum .addNum-text {
		color: #1f4456;
		margin-left: 8upx;
	}

	.progress {
		width: 124upx;
		margin-left: 2upx;
	}
</style>